---
title: "Upgrading to AG Grid 32"
description: "See what's new in AG Grid, view a full list of changes and migrate your $framework Data Grid to v32 with our Codemods."
---

## What's New

See the [release post](https://blog.ag-grid.com/whats-new-in-ag-grid-32/) for details of what's new in 
version 32.

## Codemods

Follow these steps to upgrade your project's AG Grid version to `32.0.0`:

1. Locate your project's `package.json` and note the version of AG Grid that you are currently using.

1. Update any AG Grid dependencies listed in the `package.json` to version `32.0.0`.

1. Open a terminal and navigate to your project's root folder.

1. Run the `migrate` command of version `32.0` of the AG Grid codemod runner, where `$FROM_VERSION` refers to your project's existing AG Grid version:

    ```
    npx @ag-grid-devtools/cli@latest migrate --from=$FROM_VERSION --to=32.0
    ```

    This will update your project's source files to prepare for the new release.

    By default the Codemod runner will locate all source files within the current directory. For projects with more specific requirements, pass a list of input files to the `migrate` command, or specify the `--help` argument to see more fine-grained usage instructions.

{% note %}
The Codemod runner will check the state of your project to ensure that you don't lose any work. If you would rather see a diff of the changes instead of applying them, pass the `--dry-run` argument.
{% /note %}

The codemod only transforms source files that make use of deprecated features, so if you aren't currently making use of any of those APIs your source code will be unaffected by the codemod.

See the [Codemods](./codemods/) documentation for more details.

{% if isFramework("react") %}
## Upgrading React Class-Based Components

In order to enable class-based React components when `reactiveCustomComponents` is set, follow the guide for [Migrating to Use reactiveCustomComponents](./upgrading-to-ag-grid-31-1/#migrating-custom-components-to-use-reactivecustomcomponents-option). However, instead of using the hooks to register the callbacks, you will need to use the custom context (same for all component types). For example, for filters:

```bash
static contextType = CustomComponentContext;

componentDidMount() {
  this.context.setMethods({
    doesFilterPass: params => this.doesFilterPass(params)
  });
}
```
{% /if %}

## Deprecations
{% metaTag tags=["ChartCreated", "ChartRangeSelectionChanged", "ChartOptionsChanged", "ChartDestroyed", "AsyncTransactionsFlushed", "suppressLoadingOverlay", "showLoadingOverlay"] /%}

This release includes the following deprecations:

### Column Options

`dndSource` and `dndSourceOnRowDrag` are reinstated (no longer deprecated).

### Events

The following interfaces are deprecated and replaced with the equivalent interface suffixed with Event:

- `ChartCreated`, use `ChartCreatedEvent` instead.

- `ChartRangeSelectionChanged` deprecated, use `ChartRangeSelectionChangedEvent` instead.

- `ChartOptionsChanged` deprecated, use `ChartOptionsChangedEvent` instead.

- `ChartDestroyed` deprecated, use `ChartDestroyedEvent` instead.

- `AsyncTransactionsFlushed` deprecated, use `AsyncTransactionsFlushedEvent` instead.

### GridOptions

`suppressLoadingOverlay` is deprecated, setting `loading=false` to disable overlay.

### Grid API

`showLoadingOverlay` is deprecated, setting `loading=true` to enable overlay.


## Breaking Changes
{% metaTag tags=["ColumnAPI", "suppressParentsInRowNode", "enterMovesDown", "enterMovesDownAfterEdit", "excludeHiddenColumnsFromQuickFilter", "suppressAggAtRootLevel", "serverSideFilterAllLevels", "enableChartToolPanelsButton", "functionsPassive", "onColumnRowGroupChangeRequest", "onColumnPivotChangeRequest", "onColumnValueChangeRequest", "onColumnAggFuncChangeRequest", "CellFocusedEvent", "ChangeDetectionStategyType", "ICellRendererParams.rowIndex", "IProvidedColumn", "IHeaderColumn", "setPivotMode", "setPinnedTopRowData", "setPinnedBottomRowData", "setPopupParent", "setSuppressModelUpdateAfterUpdateTransaction", "setDataTypeDefinitions", "setPagination", "paginationSetPageSize", "setSideBar", "setSuppressClipboardPaste", "setGroupRemoveSingleChildren", "setGroupRemoveLowestSingleChildren", "setGroupDisplayType", "setGroupIncludeFooter", "setGroupIncludeTotalFooter", "setRowClass", "setDeltaSort", "setSuppressRowDrag", "setSuppressMoveWhenRowDragging", "setSuppressRowClickSelection", "setEnableAdvancedFilter", "setIncludeHiddenColumnsInAdvancedFilter", "setAdvancedFilterParent", "setAdvancedFilterBuilderParams", "setQuickFilter", "setExcludeHiddenColumnsFromQuickFilter", "setIncludeHiddenColumnsInQuickFilter", "setQuickFilterParser", "setQuickFilterMatcher", "setAlwaysShowHorizontalScroll", "setAlwaysShowVerticalScroll", "setFunctionsReadOnly", "setColumnDefs", "setAutoGroupColumnDef", "setDefaultColDef", "setColumnTypes", "setTreeData", "setServerSideDatasource", "setCacheBlockSize", "setDatasource", "setViewportDatasource", "setRowData", "setEnableCellTextSelection", "setHeaderHeight", "setDomLayout", "setFillHandleDirection", "setGroupHeaderHeight", "setFloatingFiltersHeight", "setPivotHeaderHeight", "setPivotGroupHeaderHeight", "setAnimateRows", "setIsExternalFilterPresent", "setDoesExternalFilterPass", "setNavigateToNextCell", "setTabToNextCell", "setTabToNextHeader", "setNavigateToNextHeader", "setRowGroupPanelShow", "setGetGroupRowAgg", "setGetBusinessKeyForNode", "setGetChildCount", "setProcessRowPostCreate", "setGetRowId", "setGetRowClass", "setIsFullWidthRow", "setIsRowSelectable", "setIsRowMaster", "setPostSortRows", "setGetDocument", "setGetContextMenuItems", "setGetMainMenuItems", "setProcessCellForClipboard", "setSendToClipboard", "setProcessCellFromClipboard", "setProcessPivotResultColDef", "setProcessPivotResultColGroupDef", "setPostProcessPopup", "setInitialGroupOrderComparator", "setGetChartToolbarItems", "setPaginationNumberFormatter", "setGetServerSideGroupLevelParams", "setIsServerSideGroupOpenByDefault", "setIsApplyServerSideTransaction", "setIsServerSideGroup", "setGetServerSideGroupKey", "setGetRowStyle", "setGetRowHeight", "autosizeThiscolumn", "auto-params-refresh", "autoParamsRefresh"] /%}

### Build Output

The TSConfig target has been set to ES2020.

### Column API

Column API is now removed. API methods previously available via Column API are now available in Grid API instead.

### Column Menu

The new (flat) format column menu is now enabled by default. The legacy tabbed column menu can be enabled via `columnMenu = 'legacy'`. If providing a column header component template (`colDef.headerComponentParams.template`), this now requires an `eFilterButton` element.

### Compatibility

The minimum version of TypeScript you can use with AG Grid is now 5.1.

{% if isFramework("angular") %}
The minimum version of Angular you can use with AG Grid is now Angular 16.
{% /if %}

{% if isFramework("react") %}
### Custom Components

`reactiveCustomComponents` now defaults to true. If your React custom components have been declared imperatively, you can continue using them by setting `reactiveCustomComponents` to false. Please plan to migrate to the new React custom component format as the imperative behaviour was deprecated in v31.1. See [Migrating to Use reactiveCustomComponents](./upgrading-to-ag-grid-31-1/#migrating-custom-components-to-use-reactivecustomcomponents-option).
{% /if %}

### Events

The floating property has been removed from `CellFocusedEvent`. Use `rowPinned` instead.

### GridOptions

- `suppressParentsInRowNode` removed without replacement.
- `enterMovesDown` removed, use `enterNavigatesVertically` instead.
- `enterMovesDownAfterEdit` removed, use `enterNavigatesVerticallyAfterEdit` instead.
- `excludeHiddenColumnsFromQuickFilter` removed, use `includeHiddenColumnsInQuickFilter` instead.
- `suppressAggAtRootLevel` removed, use `alwaysAggregateAtRootLevel` instead.
- `serverSideFilterAllLevels` removed, use `serverSideOnlyRefreshFilteredGroups` instead.
- `enableChartToolPanelsButton` removed, use `suppressChartToolPanelsButton` instead.
- `functionsPassive` removed without replacement.
- `onColumnRowGroupChangeRequest` removed without replacement.
- `onColumnPivotChangeRequest` removed without replacement.
- `onColumnValueChangeRequest` removed without replacement.
- `onColumnAggFuncChangeRequest` removed without replacement.

### Grid API 

The Grid API methods listed below have been removed. Please use Grid API methods `setGridOption` and `updateGridOptions` to set properties instead.

- `setPivotMode`
- `setPinnedTopRowData`
- `setPinnedBottomRowData`
- `setPopupParent`
- `setSuppressModelUpdateAfterUpdateTransaction`
- `setDataTypeDefinitions`
- `setPagination`
- `paginationSetPageSize`
- `setSideBar`
- `setSuppressClipboardPaste`
- `setGroupRemoveSingleChildren`
- `setGroupRemoveLowestSingleChildren`
- `setGroupDisplayType`
- `setGroupIncludeFooter`
- `setGroupIncludeTotalFooter`
- `setRowClass`
- `setDeltaSort`
- `setSuppressRowDrag`
- `setSuppressMoveWhenRowDragging`
- `setSuppressRowClickSelection`
- `setEnableAdvancedFilter`
- `setIncludeHiddenColumnsInAdvancedFilter`
- `setAdvancedFilterParent`
- `setAdvancedFilterBuilderParams`
- `setQuickFilter`
- `setExcludeHiddenColumnsFromQuickFilter`
- `setIncludeHiddenColumnsInQuickFilter`
- `setQuickFilterParser`
- `setQuickFilterMatcher`
- `setAlwaysShowHorizontalScroll`
- `setAlwaysShowVerticalScroll`
- `setFunctionsReadOnly`
- `setColumnDefs`
- `setAutoGroupColumnDef`
- `setDefaultColDef`
- `setColumnTypes`
- `setTreeData`
- `setServerSideDatasource`
- `setCacheBlockSize`
- `setDatasource`
- `setViewportDatasource`
- `setRowData`
- `setEnableCellTextSelection`
- `setHeaderHeight`
- `setDomLayout`
- `setFillHandleDirection`
- `setGroupHeaderHeight`
- `setFloatingFiltersHeight`
- `setPivotHeaderHeight`
- `setPivotGroupHeaderHeight`
- `setAnimateRows`
- `setIsExternalFilterPresent`
- `setDoesExternalFilterPass`
- `setNavigateToNextCell`
- `setTabToNextCell`
- `setTabToNextHeader`
- `setNavigateToNextHeader`
- `setRowGroupPanelShow`
- `setGetGroupRowAgg`
- `setGetBusinessKeyForNode`
- `setGetChildCount`
- `setProcessRowPostCreate`
- `setGetRowId`
- `setGetRowClass`
- `setIsFullWidthRow`
- `setIsRowSelectable`
- `setIsRowMaster`
- `setPostSortRows`
- `setGetDocument`
- `setGetContextMenuItems`
- `setGetMainMenuItems`
- `setProcessCellForClipboard`
- `setSendToClipboard`
- `setProcessCellFromClipboard`
- `setProcessPivotResultColDef`
- `setProcessPivotResultColGroupDef`
- `setPostProcessPopup`
- `setInitialGroupOrderComparator`
- `setGetChartToolbarItems`
- `setPaginationNumberFormatter`
- `setGetServerSideGroupLevelParams`
- `setIsServerSideGroupOpenByDefault`
- `setIsApplyServerSideTransaction`
- `setIsServerSideGroup`
- `setGetServerSideGroupKey`
- `setGetRowStyle`
- `setGetRowHeight`

### Integrated Charts

- Refer to [Upgrade to AG Charts 10](https://www.ag-grid.com/charts/javascript/upgrade-to-ag-charts-10/) for behaviour and breaking changes. 

- The Integrated Charts Tool Panels button has been replaced with the new Chart Menu, from which the Chart Tool Panels can be launched (via the "Edit Chart" menu item).

- The grid option `suppressChartToolPanelsButton` and the legacy hamburger menu for Integrated Charts have been removed and replaced with the new Chart Menu. As a result, the `getChartToolbarItems` grid option now uses the type `ChartToolbarMenuItemOptions` instead of `ChartMenuOptions`. The `ChartMenuOptions` type has been removed.

- Double click to edit has been removed for Integrated Chart titles. Titles can now be edited via the Chart Tool Panels.

### Interfaces

- `ChangeDetectionStategyType` removed without replacement.
- `ICellRendererParams.rowIndex` removed, used `ICellRendererParams.node.rowIndex` instead.
- `Column`, `ColumnGroup` and `ProvidedColumnGroup` are now interfaces instead of classes. Some public methods that were part of the internal grid API were previously exposed on the classes, but are not exposed on the interfaces.
- The `IProvidedColumn` interface has been removed in favour of `Column | ProvidedColumnGroup`. The `IHeaderColumn` interfaces has been removed in favour of `Column | ColumnGroup`. If previously using `instanceof` to differentiate, it is now possible to check the `isColumn` property, which can be used as a type differentiator.

### Keyboard Navigation

- Pressing the {% kbd "⇥ Tab" /%} key when focusing on a set filter list item or a column's tool panel list item takes focus out of the list. Navigating inside the list is possible with {% kbd "↑" /%}/{% kbd "↓" /%} Arrow keys.
- The column menu is now opened by the {% kbd "⌥ Alt" /%}+{% kbd "↓" /%} keyboard combination, with the column filter opened by {% kbd "^ Ctrl" /%}+{% kbd "↵ Enter" /%}.

### Localisation

Localisation key `autosizeThiscolumn` has been renamed to `autosizeThisColumn`

### Row IDs

`getRowId` callback is now called to set row ids for pinned rows.

### Skeleton Loaders

Skeleton loaders of different widths are shown across rows.

### Text Wrapping

Header and grid cells text wrapping uses `word-break:'break-word'` mode instead of `'normal'`. This can be overridden via CSS.

{% if isFramework("vue") %}
### Vue

- Vue 2 is no longer supported. Please upgrade to Vue 3.

- Storing the grid API in a `ref` is no longer supported. It must instead be stored in a `shallowRef`.

- `auto-params-refresh` / `autoParamsRefresh` removed.
{% /if %}
